<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 商城管理 <span class="c-gray en">&gt;</span> 商品分类<span class="c-gray en">&gt;</span>商品分类明细管理</nav>
	<div id="sectionContent" class="Hui-article">
		<article class="cl pd-20">
			<div class="mt-20">
				<table class="table table-border table-bordered table-bg">
					<thead>
						<tr>
							<th colspan="7" scope="col">
									<a v-on:click="addData()" class="btn size-M btn-primary"><i class="Hui-iconfont">&#xe604;</i> 添加</a>
							</th>
							<th scope="col">
									<a href="javascript:;" class="btn btn-success" v-on:click="search()"><i class="Hui-iconfont">&#xe709;</i> 刷新</a>
							</th>
						</tr>
						<tr class="text-c">
							<th>ID</th>
							<th>名称</th>
							<th>CODE</th>
							<th>ICON</th>
							<th>顺序</th>
							<th>属性</th>
							<th>创建时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr class="text-c" v-for="row in result">
							<td>{{row.id}}</td>
							<td>{{row.classificationDetailName}}</td>
							<td>{{row.classificationDetailCode}}</td>
							<td title="{{row.classificationDetailIcon}}">
									<img v-bind:src="row.classificationDetailIcon" width="30" height="30" onerror="this.src='http://p3cxjq83j.bkt.clouddn.com/pic_not_found.png'"/>
							</td>
							<td>{{row.classificationDetailOrder}}</td>
							<!--<td v-for="(val, key) in row.attributes">{{key}}</td>-->
							<td>
								<p v-for="attr in row.attributes" style="color:green;text-align:left;">{{attr.attributeType}}：
									<span v-for="detailAttr in attr.attributes" style="color:red">{{detailAttr.name}}、</span><br/>
								</p>
							</td>
							<td>{{row.createTime | formatDate}}</td>
							<td>
									<a v-on:click="editData(row.id)" style="cursor:pointer"><i class="Hui-iconfont">&#xe60c;</i>编辑</a>
									<a v-on:click="deleteData(row.id)" style="cursor:pointer"><i class="Hui-iconfont">&#xe6e2;</i>删除</a>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</article>
	</div>
<script>
      new Vue({
          el:'#sectionContent',
          http: authorization(),
          data:{
              result:{}
          },
          created:function(){
              this.search();
          },
          methods:{
							addData:function(){
									window.parent.location.href="#!view/shopping/classification/details/classification-detail-add.html?cId="+getQueryString('cId');
							},
							editData:function(classificationDetailId){
									window.parent.location.href="#!view/shopping/classification/details/classification-detail-edit.html?cId="+getQueryString('cId')+"&id="+classificationDetailId;
							},
              deleteData:function(classificationDetailId){
                  if(!confirm("你确认删除数据吗？")){
                      return;
                  }
                  this.$http.delete('/restful/shopping/v1.0/classification/detail/?classificationDetailId='+classificationDetailId).then((response) => {
                      this.search();
                  }).catch(function(response) {
                      alert(errorMsg(response));
                  });
              },
              pageselectCallback:function(currentPage){
                  if(currentPage == -1){
                      return true;
                  }
                  this.loadGrid(currentPage + 1,false);
                  return false;
              },
              search:function(){
                  this.loadGrid();
                  return;
              },
              loadGrid:function(){
                  this.$http.get('/restful/shopping/v1.0/classification/detail/list/'+getQueryString('cId')).then((response) => {
                      var content = responseObj(response).data;
                      this.result = content;
                  }).catch(function(response) {
                      alert(errorMsg(response));
                  });
              }
          },
          filters: {
              formatDate:function(time) {
                  return new Date(time).format("yyyy-MM-dd hh:mm:ss");
              }
          }
      });
  </script>
